<template>
  <view class="ver-layout">
    <!--  标题返回栏  -->
    <view class="back-title-layout hor-layout-center" :style="{opacity: titleOpacity}">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="title-text">教师详情</view>
      <view class="edit-view" @click="toEditTeacher">
        <i class="iconfont edit-icon">&#xe645;</i>
      </view>
    </view>
    <!--  头部信息栏  -->
    <view class="top-layout" :style="getTopStyle">
      <view class="title-layout hor-layout-center">
        <view class="back-view" @click="navBack">
          <i class="iconfont back-icon">&#xe8de;</i>
        </view>
        <view class="title-text">教师详情</view>
        <view class="edit-view" @click="toEditTeacher">
          <i class="iconfont edit-icon">&#xe645;</i>
        </view>
      </view>
      <view class="top-content hor-layout">
        <image class="teacher-icon" :src="teacherObj.avatar?teacherObj.avatar:ic_teacher_man_default"/>
        <view class="content-info ver-layout">
          <view class="info-name">{{ teacherObj.name }}</view>
          <view class="company-info hor-layout-side">
            <view>{{ teacherInfo.org_name }}</view>
            <!--            <view class="num">{{ teacherInfo.student_total }}</view>-->
          </view>
          <view class="infos-info hor-layout-side">
            <view>{{ getTeacherText }}</view>
            <!--            <view class="student-flag">学生</view>-->
          </view>
        </view>
      </view>
      <view class="top-bottom hor-layout-side-center" style="display: none">
        <view class="to-grade-detail">查看等级详情</view>
        <view class="edit-user-info-btn">编辑个人信息</view>
      </view>
    </view>
    <!--  下面的布局  -->
    <view class="content-layout">
      <view class="tab-layout hor-layout">
        <view v-for="(item,index) in tabList" :key="index" class="tab-item" :class="{'select':index===currentTab}"
              @click="tabChange(index)">
          {{ item.name }}
        </view>
      </view>
      <!--  信息布局   -->
      <view class="tab-content">
        <!--    基本信息    -->
        <view v-show="currentTab===0">
          <view v-for="(item,index) in studentInfos" :key="index" class="student-info-item hor-layout-side-center">
            <view class="student-info-text">{{ item.label }}</view>
            <view class="single-line" :class="{'student-info-intro':item.label==='教师介绍'}">{{ item.value }}</view>
          </view>
          <view class="student-info-item hor-layout-side-center">
            <view class="student-info-text">状态</view>
            <u-switch v-model="statusChecked" active-color="#42B4AB" size="35" @change="changeTeacherStatus"></u-switch>
          </view>
        </view>
        <view v-show="currentTab===1">
          <!--  详细信息  -->
          <view class="teacher-detail">
            <!--   工作经历   -->
            <view class="detail-title">工作经历</view>
            <block v-for="(item,index) in teacherInfo.resume&&teacherInfo.resume.company" :key="'info'+index">
              <view class="detail-work-company">{{ item.company_name }}</view>
              <view class="detail-work-name">{{ item.role }} {{ item.start_time }}——{{ item.end_time }}</view>
              <view class="detail-work-name" style="padding-right: 28px">{{ item.work_desc }}</view>
            </block>
            <view class="detail-divider"></view>
            <!--   职业优势   -->
            <view class="detail-title">职业优势</view>
            <view class="hor-layout">
              <view v-for="(item,index) in teacherInfo.resume&&teacherInfo.resume.occ_good" :key="'good'+index"
                    class="detail-good-tag">
                {{ item.occ_name }}
              </view>
            </view>
            <view class="detail-divider"></view>
            <!--  教育经历    -->
            <view class="detail-title">教育经历</view>
            <block v-for="(item,index) in teacherInfo.resume&&teacherInfo.resume.experience" :key="'ex'+index">
              <view class="detail-school-name">{{ item.school_name }}</view>
              <view class="detail-school-info">{{ item.specialty }} {{ item.edate }}毕业</view>
              <view class="detail-school-info">{{ item.school_experience }}</view>
            </block>
            <view class="detail-divider"></view>
            <!--  自我评价    -->
            <view class="detail-title">自我评价</view>
            <view class="detail-character">{{ teacherInfo.resume && teacherInfo.resume.comments }}</view>
            <view class="detail-divider"></view>
            <!--  证书及奖项    -->
            <view class="detail-title">证书及奖项</view>
            <block v-for="(item,index) in teacherInfo.resume &&teacherInfo.resume.certificate" :key="'cer'+index">
              <view class="detail-certificate-name">{{ item.hname }}</view>
              <view class="detail-certificate-time">{{ item.send_cert_time }}</view>
              <view class="detail-certificate-display">
                <span v-if="!item.hcert">证书展示</span>
                <image v-else class="detail-certificate-display-image" :src="item.hcert"/>
              </view>
            </block>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {addTeacher} from "@/router.js"
import {TeacherDetailApi} from "@/api/teacherManage.js"

let ic_teacher_man_default = require("@/static/home/ic_teacher_man_default.png")
let ic_user_top_bg = require("@/static/home/ic_user_top_bg.png")
let engine = new TeacherDetailApi()
export default {
  name: "teacherInfo",
  data() {
    return {
      ic_teacher_man_default,
      titleOpacity: 0,
      statusChecked: false,
      teacherObj: {},
      teacherInfo: {},
      tabList: [{name: '基本信息'}, {name: '简历'}],
      currentTab: 0,
      studentInfoMap: {
        realname: '姓 名',
        phone: '联系电话',
        sexValue: '性别',
        age: '年龄',
        id_card: '身份证号',
        major_name: '专 业',
        entry_time: '入职时间',
        basepay: '基本工资',
        fixedamount: '绩效提成',
        introduction: '教师介绍',
      },
    }
  },
  computed: {
    getTeacherText() {
      let {major_name, sex, age, phone} = this.teacherInfo
      return `${major_name}，${sex === 1 ? '男' : '女'}，${age}岁，${phone}`
    },
    getTopStyle() {
      return {backgroundImage: `url(${ic_user_top_bg})`}
    },
    studentInfos() {
      let studentInfoMap = this.studentInfoMap, sKeyList = Object.keys(studentInfoMap), teacherInfo = this.teacherInfo
      sKeyList = sKeyList.map(key => {
        return {label: studentInfoMap[key], value: teacherInfo[key] ? teacherInfo[key] : '--'}
      })
      return sKeyList
    }
  },
  onLoad(options) {
    this.teacherObj = options
    this.getTeacherDetail()
  },
  onPageScroll(e) {
    // console.log("onPageScroll", e)
    this.titleOpacity = e.scrollTop * 0.005
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    tabChange(index) {
      this.currentTab = index
    },
    toEditTeacher() {
      this.$u.route({url: addTeacher, params: {...this.teacherInfo, resume: ''}})
    },
    getTeacherDetail() {
      engine.getTeacherDetail(this.teacherObj.id).then(res => {
        this.teacherInfo = res.data
        this.teacherInfo.sexValue = res.data.sex === 1 ? '男' : '女'
        this.statusChecked = this.teacherInfo.status === 1 //0否1是
      })
    },
    changeTeacherStatus() {
      let status = this.statusChecked ? 1 : 2 //是否启用,1启用2停用
      let teacher_id = this.teacherObj.id
      engine.changeTeacherStatus(status, teacher_id).then(res => {
        if (this.statusChecked) this.$u.toast("启用成功！")
        else this.$u.toast("停用成功！")
        this.getTeacherDetail()
      })
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.back-title-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  background: #666D7A;
}

.top-layout {
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 149px);
  background-repeat: repeat;
  background-size: 100% 100%;
  z-index: 999;
}

.title-layout {
  width: 100%;
  height: 44px;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.title-text {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.edit-view {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.edit-icon {
  color: white;
  font-size: 20px;
}

.top-content {
  margin-left: 20px;
  margin-right: 24px;
  margin-top: 13px;
}

.teacher-icon {
  width: 53px;
  height: 53px;
  flex-shrink: 0;
  border-radius: 50%;
}

.content-info {
  width: 100%;
  margin-left: 9px;
  color: white;
}

.info-name {
  font-size: 16px;
  line-height: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #F3F3F3;
}

.company-info {
  margin-top: 9px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  color: #F3F3F3;
}

.company-info > .num {
  width: 40px;
  text-align: center;
  font-size: 18px;
}

.infos-info {
  margin-top: 11px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  color: #F3F3F3;
}

.infos-info > .student-flag {
  width: 40px;
  text-align: center;
}

.top-bottom {
  margin-top: 18px;
  margin-left: 20px;
  margin-right: 24px;
}

.to-grade-detail {
  height: 24px;
  line-height: 24px;
  padding: 0px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  /* 文本样式 */
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #F3F3F3;
}

.edit-user-info-btn {
  padding: 9px 13px;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  /* 文本样式 */
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #F3F3F3;
  line-height: 9px;
}

.content-layout {
  /*margin-top: calc(var(--status-bar-height) + 140px);*/
}

.tab-layout {
  width: 100%;
  height: 40px;
  background: white;
  border-bottom: 1px solid #E4E4E4;
}

.tab-item {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* 文本 */
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.tab-item.select {
  color: #42B4AB;
  border-bottom: 2px solid #42B4AB;
}

.student-info-item {
  padding: 0px 12px;
  width: 100%;
  height: 41px;
  background: white;
  border-bottom: 1px solid #E4E4E4;
}

.student-info-item > * {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.student-info-text {
  margin-right: 15px;
  flex-shrink: 0;
  width: 60px;
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
}

.student-info-intro {
  font-size: 14px;
  color: #999999;
}

.divider-view {
  width: 100%;
  height: 20px;
  background: #F2F2F2;
}

.start-stop-use {
  width: 100%;
  height: 60px;
  padding: 0px 12px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.teacher-detail {
  width: 100%;
  padding: 24px 12px;
  background: white;
}

.detail-title {
  margin-bottom: 5px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}

.detail-work-company {
  margin-top: 17px;
  font-size: 14px;
  color: #000000;
}

.detail-work-name {
  margin-top: 12px;
  font-size: 14px;
  color: #666666;
}

.detail-divider {
  height: 1px;
  width: 100%;
  margin-top: 24px;
  margin-bottom: 24px;
  background: #E5E5E5;
}

.detail-good-tag {
  margin-top: 20px;
  margin-right: 8px;
  width: fit-content;
  padding: 5px 7px;
  background: #42B4AB;
  border-radius: 3px;
  font-size: 14px;
  color: #FFFFFF;
}

.detail-school-name {
  margin-top: 20px;
  font-size: 14px;
  color: #000000;
}

.detail-school-info {
  margin-top: 12px;
  font-size: 14px;
  color: #666666;
}

.detail-character {
  margin-top: 20px;
  font-size: 12px;
  color: #000000;
  line-height: 18px;
}

.detail-certificate-name {
  margin-top: 20px;
  certificatefont-size: 14px;
  color: #000000;
}

.detail-certificate-time {
  margin-top: 13px;
  font-size: 14px;
  color: #666666;
}

.detail-certificate-display {
  margin-top: 24px;
  width: 100%;
  height: 190px;
  line-height: 190px;
  text-align: center;
  background: #E1DFDF;
  border-radius: 6px;
  /* 文本样式 */
  font-size: 14px;
  color: #000000;
}

.detail-certificate-display-image {
  width: 100%;
  height: 100%;
}
</style>
